<template>
  <view>
    <view class="head">
      <image src="../../static/my/wdqb.png" class="bg" mode="aspectFill" />
      <view class="ctn">
        <view class="line1">
          <image src="../../static/my/qbIcon.png" mode="aspectFill" />
          我的钱包
        </view>
        <view class="line2">我的余额 </view>
        <view class="line3"> <text>￥</text>790,000 </view>
        <view class="btn">立即充值</view>
      </view>
    </view>
    <view class="commonBox main">
      <template v-if="teamList?.length > 0">
        <view class="detail_box">
          <view v-for="(item, index) in teamList" :key="index" class="item">
            <view class="top">
              <view>{{ 123 }}</view>
              <view class="num">+{{ 123 }}</view>
            </view>
            <view class="top">
              <view class="time">{{ dayjs().format("YYYY-MM-DD HH:mm:ss") }}</view>
              <view class="status">余额:123</view>
            </view>
          </view>
        </view>
      </template>
      <view v-else style="width: 100%; display: flex; justify-content: center">
        <u-empty mode="list"></u-empty>
      </view>
      <u-loadmore height="30" :status="status" />
    </view>
  </view>
</template>
<script setup lang="ts">
import dayjs from "dayjs";
import { ref } from "vue";
//@ts-ignore
import { onShow, onReachBottom } from "@dcloudio/uni-app";
const teamList = ref([{}]);
const status = ref("loadmore");
const page = ref(1);
const getList = async () => {
  status.value = "loadmore";
  // const res: any = await shopSelleApplyList({ shopId: id, pageNo: page.value });
  // teamList.value = teamList.value.concat(res.settleInfoList);
  // if (!res.next) {
  //   status.value = "nomore";
  // } else {
  //   status.value = "loadmore";
  // }
};
onReachBottom(() => {
  page.value++;
  getList();
});
</script>
<style lang="less" scoped>
.head {
  position: relative;
  padding: 20rpx;
  .bg {
    position: absolute;
    left: 0;
    top: 20rpx;
    width: 100%;
    height: 452rpx;
  }
  .ctn {
    position: relative;
    z-index: 99;
    padding: 40rpx 60rpx;
    .line1 {
      display: flex;
      align-items: center;

      font-size: 28rpx;
      color: #ffffff;
      image {
        width: 56rpx;
        height: 56rpx;
      }
    }
    .line2 {
      font-size: 24rpx;
      color: #ffffff;
      text-align: center;
    }
    .line3 {
      text-align: center;
      font-size: 96rpx;
      margin-top: 16rpx;
      color: #ffffff;
      text {
        font-size: 36rpx;
      }
    }
    .btn {
      background: #ffffff;
      border-radius: 16rp;
      padding: 24rpx;
      text-align: center;
      margin-top: 40rpx;
      border-radius: 20rpx;
      font-size: 28rpx;
      color: #81d8d0;
    }
  }
}
.detail_box {
  background: #fff;
  border-radius: 16rpx;
}
.commonBox {
  padding: 30rpx;
  margin-top: 10rpx;
}
.t {
  display: flex;
  margin-top: 50rpx;
  justify-content: space-between;
  font-size: 24rpx;
  color: #ffffff;
  line-height: 34rpx;
  padding-right: 50rpx;
}
.item {
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f8f8f8;
}
.top {
  display: flex;
  justify-content: space-between;
  font-size: 30rpx;
  color: #333333;
  align-items: center;
  .time {
    font-size: 24rpx;
    color: #a5a5a5;
    margin-top: 15rpx;
  }
  .status {
    font-size: 24rpx;
    color: #a5a5a5;
  }
  .num {
    font-size: 40rpx;
    color: #e21e1a;
  }
}
</style>
